<template>
	<view>
		<userinfo id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		
		<view class="m-top-wrap">
			<view class="m-top-title">
				<navigator url="../plat_menu/my" open-type="switchTab"></navigator>
				<text>我的订单</text>
			</view>
		</view>	
		
		<scroll-view class="topTab scroll-view_H" id="scrollview" scroll-x="true" :scroll-left="scrollLeft" > 
			<block v-for="(item,index) in tablist" :key="item.status" > 
		     	<view class="listLab curColor" :id="'into'+index" v-if="curActive == index " 
				:style="{color:mobile_head_color,borderColor:mobile_head_color}" 
				@tap="changClick(item.status)">{{ item.text }} 
				   <i class="icon_nums" v-if="item.nums >0 && item.nums <= 99 ">{{ item.nums }}</i>
				   <i class="icon_nums icon_numsMore" v-if="item.nums > 99"> 99+ </i> 
				</view>
				<view class="listLab" :id="'into'+index" @tap="changClick(item.status)" v-else >{{ item.text }} 
			       <i class="icon_nums" v-if="item.nums >0 && item.nums <= 99 ">{{ item.nums }}</i>
				   <i class="icon_nums icon_numsMore" v-if="item.nums > 99">99+</i>
				</view>
			</block> 
		</scroll-view> 
		<view class="goods_box">
		   <view v-for="(item, index) in goodsList" :key="index" 
			class="goods_block">
			  <view class="flexRow goods_blockTil">
				  <view :class="'storeName '+(item.store_url?'storeNameFr':'')" @click="goUrl(item.store_url)">{{ item.store_name }} </view>
				  <view  class="orderState" :style="{color:mobile_head_color}">{{ item.status_txt }}  <text v-if="item.is_del ==1"  @click="delOrder(item.id)" class="order_delImg" > </text> </view>
			  </view>
			  
			  <view class="m-time-wrap" v-if="curActive==2">
				  <view v-if="item.create_time">
					  <text>下单时间：</text>
					  <text>{{ item.create_time }}</text>
				  </view>
				  <view v-if="item.expect_use_time">
					  <text>配送时间：</text>
					  <text>{{ item.expect_use_time }}</text>
				  </view>
			  </view>
			  
			<!--  <block v-for="(itemPro, indexPro) in item.goods_list" :key="itemPro.goods_id">
				  <view class="goods_blockBox" @click="goUrl(item.redirect_url)" >
					<view class="goods_Img">
						 <image :src="itemPro.goods_image" lazy-load="true" mode="aspectFill" style="width: 70px; height:70px;"></image> 
					</view> 
					<view class="goods_txtBox"> 
						<view class="goods_name goods_nameTil flexRow">
							<text>{{ itemPro.name }}</text>
							<text> {{ currency + itemPro.price }}</text> 
						</view> 
						<view class="goods_rg">×{{ itemPro.num }}</view>
					</view>   
				  </view>  
			  </block> -->
			  
			  <view class="m-order-wrap" @click="goUrl(item.redirect_url)">
				<block v-for="(itemPro, indexPro) in item.goods_list" :key="itemPro.goods_id">
				  <view class="m-order-item">
					<view>
						 <image :src="itemPro.goods_image" lazy-load="true" mode="aspectFill" 
						 style="width: 70px; height:70px; border-radius: 6px;"></image> 
					</view> 
					<view class="m-order-item-txt"> 
						<view>
							<text>{{ itemPro.name?itemPro.name.slice(0,2):'' }}</text>
							<text> ×{{ itemPro.num}}</text> 
						</view> 
						<view>{{ currency + itemPro.price }}</view>
					</view>   
				  </view>
				</block>  
			  </view>
			 
			 <!-- <view class="flexRow goods_blockBT">
				  <view class="goods_name">{{ item.business_name }} </view>
				  <view class="goods_total"><span v-if="item.yzf>0">(预付单)总计{{item.total_price}}</span> 共{{ item.num }}件 <text><span v-if="item.yzf>0">(二次支付)</span>{{ currency + item.price }}</text></view>
			  </view> 
			  
			  <view class="goods_blockBT_btn">
				  
				  <block v-for="(itemArr, indexArr) in item.btn_arr" :key="" >
					  <text :style="{color:mobile_head_color,borderColor:mobile_head_color}" @click="goUrl(itemArr.url)">{{item.yzf>0?'二次支付':itemArr.text }}</text> 
				  </block>  
			  </view> -->
			  <!--  <view class="flexRow goods_blockBT">
				  <view class="goods_name">{{ item.business_name }} </view>
				  <view class="goods_total">
					 <span v-if="item.yzf>0">(预付单)总计{{item.total_price}}</span>共{{ item.num }}件<text><span v-if="item.yzf>0 && item.yzf_paid >0">(二次支付)</span>
					{{ currency + item.price }}</text>
				  </view>
			  </view> 
			  
			  <view class="goods_blockBT_btn">
				  <block v-for="(itemArr, indexArr) in item.btn_arr" :key="" >
					  <text :style="{color:mobile_head_color,borderColor:mobile_head_color}" @click="goUrl(itemArr.url)">{{item.yzf>0 && item.yzf_paid>0?"二次支付":itemArr.text }}</text> 
				  </block>  
			  </view> -->
			  
			  <view class="m-fuck-wrap">
				  <view class="goods_total">
				  					 <span v-if="item.yzf>0">(预付单)总计{{item.total_price}}</span>共{{ item.num }}件<text><span v-if="item.yzf>0 && item.yzf_paid >0">(二次支付)</span>
				  					{{ currency + item.price }}</text>
				  </view>
				  <view class="goods_blockBT_btn">
					  <block v-for="(itemArr, indexArr) in item.btn_arr" :key="itemArr" >
						  <text 
							:style="{color:mobile_head_color,borderColor:mobile_head_color}" 
							@click="goUrl(itemArr.url)"
							:class="'m_fuck_btn'+indexArr"
						  >{{item.yzf>0 && item.yzf_paid>0?"二次支付":itemArr.text }}</text> 
					  </block> 
					   <!-- mf -->
						<!-- <view class="newmore" v-if="curActive==4" @click="newmore( item.id )">再来一单</view> -->
						<view class="newmore" v-if="2<curActive<5" @click="newmore( item.id )">再来一单</view>
					   <!-- mf -->
				  </view>
			  </view>
			  
			  
			  
			</view>  	 
			<view v-show='noData' class="noData">{{ noDataTip }}</view>
		 </view>  
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
	var app = getApp(); 
	var _this; 
	var page;
	export default{
		data(){
			return{
				tablist:[],
				curActive:'0',
				goodsList:[],
				topFixed:false,
				isHas:true,
				noData:false,
				noDataTip:'',
				mobile_head_color:'', 
				scrollLeft:0,
				currency: '¥',
				user_options: {}
			}
		},
		onLoad(e){ 
			console.log(e.state)
			page=1
			_this = this
			_this.curActive = e.state 
			
			common.setMainColor(_this, config => {
				_this.currency = config.config.Currency_symbol
			 	_this.mobile_head_color = config.config.mobile_head_color
			 	console.log('config.config.mobile_head_color', config.config.mobile_head_color); 
				
				if (app.globalData.userInfo) {
					_this.initTablist()
					_this.initData(_this.curActive);
				} else {
					_this.user_options = {
						toLogin: true
					}
				}
			});
		},
		methods:{    
			getUserInfo(e) {
				console.log('用户信息', e);
				if (e.userInfo) {
					_this.initTablist()
					_this.initData(_this.curActive);
				}
			},
			changClick(status){ 
			   _this.curActive = status
			   page = 1
			   _this.isHas = true
			   _this.goodsList =[]
			   _this.noDataTip=''
			   _this.initData(status) 
			   
			},
			initTablist(){
				common.post('My&a=system_order_status',{noTip:false}, data => { 
					_this.tablist = data 
				})
			}, 
			// mf 2020 08 31 
			newmore(oid){
				common.post('My&a=newmore',{
					order_id:oid
				},"saveReply",_this);
			},
			saveReply: function (res) {
				uni.navigateTo({
					url:'../shop_new/shopDetail/shopDetail?store_id='+ res  //../shop_new/cart/cart
				})
			 // wx.navigateBack();
			},
			//2020 08 31
			initData(status){
				common.post('My&a=system_order_list', {
					page: page,
					status:status
				}, data => {  
					console.log('我的订单列表',data,'当前状态',status)
					if(status ==5){
						var chaWidth = _this.tablist.length*100 - windowWidth
						if(chaWidth >0){
							_this.scrollLeft = chaWidth
						} 
					}
					if(page ==1){
						_this.goodsList = data
					}else{
						_this.goodsList = _this.goodsList.concat(data)  
					}
					
					if(data.length<10){
						_this.isHas = false 
						_this.noData = true
						if(_this.goodsList.length == 0){
							_this.noDataTip = '暂无数据'
						}else{
							_this.noDataTip = '别拉了，没有啦！' 
						} 
					} 
					if(_this.isHas == true){
						page++
					}
				})
				 
			},
			goUrl(option){
				console.log('murl')
				console.log(option)
				common.parseUrl(option)
			}, 
			onPageScroll:function(e){ 
				if(e.scrollTop >5){ 
					this.topFixed = true
				}else{ 
					this.topFixed = false
				}  
			}, 
			onReachBottom(){  
				if(_this.isHas == true){
					_this.initData(_this.curActive) 
				}
				
			}, 
			delOrder(option){ 
				uni.showModal({
				    title: '提示',
				    content: '确定删除此订单',
				    success: function (res) {
				        if (res.confirm) {
				            common.post('My&a=del_order', {
				            	id:option
				            }, data => {    
								page =1
				            	_this.initData(_this.curActive)
								_this.initTablist()
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
				
			}
		}
	}
	
</script>

<style>
	.goods_blockBT_btn {
		display: flex;
	}
	
	.m_fuck_btn0 {
		display: none !important;
	}
	
	.newmore{
		border: 1px solid #ddd;
		border-radius: 20px;
		padding: 0 10px;
		display: inline-block;
		margin-left: 10px;
		text-align: center;
		color: #EA5504;
		border-color: #EA5504;

	}
	.m-time-wrap {
		padding-bottom:10px;
	}
	
	.m-order-wrap {
		display: flex;
		overflow: hidden;
	}
	
	.m-order-item {
		margin-right: 5px;
	}
	
	.m-order-item-txt{
		padding:4px;
		font-size:12px;
		color:#000;
	}
	
	
	.m-fuck-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.goods_total {
		font-weight: bold;
		color:#000;
	}
	
	.m-top-wrap {
		background-image: url('');
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% auto;
	}
	
	.m-top-title {
		display: flex;
		height:130upx;
		padding: 40upx 40upx 0;
		margin-bottom:5upx;
	}
	
	.m-top-title navigator {
		width:30upx;
		height:130upx;
		background: url('./arrow-left.png') no-repeat center;
		background-size: 30upx 50upx;
	}
	
	.m-top-title text {
		width: 610upx;
		text-align: center;
		line-height: 130upx;
		color:#fff;
		font-size:38upx;
		font-weight: bold;
	}
	
	.scroll-view_H {
	        white-space: nowrap;
	}
	 .scroll-view-item_H {
			display: inline-block;
			width:60%;
			height: 100px;
		}
		.uni-bg-red {
			background: red;
		}
		
		.uni-bg-green {
			background: green;
		}
		
		.uni-bg-blue {
			background: blue;
		}    
			
			
	.noData{
		padding: 20px 0;
		text-align: center;
	}
	.flexRow{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content:space-between;
		align-items:flex-start;  
	}
	.goods_nameTil{
		
	}
	.topTab{ 
		background: #fff; 
		width: 100%;
		white-space: nowrap;
		border-bottom: 1px solid #eee;
		font-size: 13px;
	}
	.topFixed{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		z-index: 888;
		background: #fff;
	}
	.topTab .listLab{
		width:16.6%;
		box-sizing: border-box;
		padding: 15px 0; 
		text-align: center;
		box-sizing: border-box;
		display: inline-block;
		position: relative;
	}
	.topTab	.listLab.curColor{ 
		border-bottom: 1px solid #06c1ae;
	}
 
	.goods_box .goods_block{
		width: calc(100%-20px); 
		margin: 0 10px;
		margin-bottom: 10px;
		box-sizing: border-box; 
		border-radius: 5px;
		background: #FFF;
		padding: 10px;
		margin-bottom: 10px;
	} 
	.goods_box .goods_blockBox{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content:flex-start; 
		margin-bottom: 15px;
	} 
	
	.goods_box .goods_blockBox .goods_txtBox{
		padding-left: 10px;
		line-height: 28px;
		width: 100%;
	}
	.goods_box .goods_blockBox .goods_txtBox .goods_name{
		color: #333;
		font-size: 14px;
	} 
	.goods_box .goods_blockTil{
		font-size: 15px;
		line-height: 30px;
		padding-bottom: 5px;
	}
	.goods_box .goods_blockTil .storeName{
		color: #000;
	}
	.goods_box  {
		color:#999;
		font-size:13px;
		margin-top: 10px;
	}
	.goods_blockBT{
		padding: 5px 0;
	}
	.order_delImg{
		padding-right: 40px;
		background: url(../../static/images/order_del.png) right center no-repeat;
		background-size: 20px auto;
	}
	.goods_blockBT .goods_name{
		padding-left:20px;
		background: url(../../static/images/pro_class.png) left center no-repeat;
		background-size: 16px auto;
	}
	.goods_blockBT .goods_total{
		color: #333;
		font-weight: bold;
	}
	.goods_blockBT .goods_total text{
		padding-left: 8px;
	}
	.storeNameFr{
		background: url(../../static/images/right.png) right center no-repeat ;
		background-size: 10px auto;
		padding-right: 14px;
	}
	.goods_blockBT_btn{
		margin: 5px 0;
	}
	.goods_blockBT_btn text{
		border-radius: 20px;
		border:1px solid #ddd;
		border-radius: 20px;
		padding: 0 10px;
		display: inline-block;
		margin-left: 10px;
		text-align: center;
	}
	.goods_rg{text-align: right;}
    .icon_nums{
		position: absolute;
		right: 3px;
		top:6px;
		background: #fff;
		color: #ff2c4d;
		font-style: normal;
		font-size: 10px;
		border-radius: 16rpx; 
		overflow: hidden;
		border: 1px solid rgb(238, 63, 77);
		padding: 0px 8rpx;
		min-width: 14rpx;
		height: 24rpx;
		line-height: 24rpx;
   }
    .icon_nums.icon_numsMore{
		border-radius: 20px;
		width: auto;
		padding: 0 2px;
    }
	.goods_Img image{
		border-radius: 10rpx;
	}
</style>
